<template>
	<view>
		<uv-notify ref="notify" customStyle="z-index:9999"></uv-notify>
		<view v-show="showRenting==false">
			<!-- 上半部分 -->
			<view class="search-container">
				<uv-cell title="电车列表" label="根据当前位置搜索附近可用车辆" :center="true">
					<template v-slot:value>
					<!-- 	<uv-search placeholder="请输入搜索单车编号" v-model="keyword"></uv-search> -->
						
					</template>
					<template v-slot:icon>
						<uv-button type="warning" text="管理单车" @click="manageAllbikes()" v-show="showSetting==true"></uv-button>
					</template>
				</uv-cell>
				
				<uv-subsection :list="list" :current="showAllorAvailable"
					@change="changeShowAllorAvailable"></uv-subsection>
				
				<uv-cell-group v-for="(bikeVo,index) in bikesData" :key="index">
					<uv-cell @click="openPopup(bikeVo)">
						<!-- 自定义左侧标题 -->
						<template v-slot:title>
							<text>电动车编号：{{bikeVo.bike.bikeId}}</text>
						</template>
						<template v-slot:icon>
							<uv-icon size="50rpx" name="search"></uv-icon>
						</template>
						<template v-slot:label>
							<text style="font-size: 16rpx;color: #999;">电池电量：{{bikeVo.battery.electricity}}</text>
						</template>
						<!-- 自定义右侧值 -->
						<template v-slot:value>
							<text>距离{{bikeVo.distance}}km</text>
						</template>
					</uv-cell>
				</uv-cell-group>
			</view>
			<!-- 下半部分 -->
			<view>
				<uv-popup ref="popup" @change="change" round="15px" customStyle="display:flex;flex-direction:column;">
					<view class="popup-content">
						<!-- <view class="bike-status">
							<div class="box">
								<uv-tags text="单车ID编号："></uv-tags>
								<uv-text type="primary" :text="this.currentBike.bikeId"></uv-text>
							</div>
							<div class="box">
								<uv-tags text="单车电池编号："></uv-tags>
								<uv-text type="primary" :text="this.currentBattery.batteryId"></uv-text>
							</div>
							<div class="box">
								<uv-tags text="当前位置距离单车有："></uv-tags>
								<uv-text type="primary" :text="this.currentBikeVo.distance+'km'"></uv-text>
							</div>
							<div class="box" v-show="this.showSetting">
								<uv-tags text="设定的光照阈值：" plain size="large" color="#ffaa00"
									borderColor="#ffaa00"></uv-tags>
								<uv-number-box v-model="setlightThreshold" @change="valChange" :min="0" :max="1000"
									step="0.1" decimal-length="1"></uv-number-box>
							</div>
							<div class="box" v-show="this.showSetting">
								<uv-tags text="同步时间到设备" plain size="large" icon="tags" color="#00aa00"
									borderColor="#00aa00"></uv-tags>
								<uv-switch v-model="isSyncTime"></uv-switch>
							</div>
						</view> -->
						<view class="rent">
							<uv-button @click="rentBike()" text="借车"
								color="linear-gradient(to right, rgb(85, 170, 255), rgb(255, 170, 0))"></uv-button>
						</view>
						<!-- <view class="set" v-show="this.showSetting">
							<uv-button @click="sendSet()" text="发送设置"
								color="linear-gradient(to right, rgb(85, 170, 255), rgb(255, 170, 0))"></uv-button>
						</view> -->
						<view class="closePopup">
							<uv-button @click="closePopup()" text="关闭弹窗"
								color="linear-gradient(to right, rgb(85, 170, 255), rgb(255, 170, 0))"></uv-button>
						</view>
					</view>

				</uv-popup>
			</view>


			<uni-pagination :current="current" :total="total" title="标题文字" :show-icon="true" @change="changePage" />
			<view class="btn-view">
				<view>
					<text class="example-info"
						style="white-space: nowrap;">当前页：{{ current }}，数据总量：{{ total }}条，每页数据：{{ pageSize }}</text>
				</view>
				<view class="btn-flex">
					<button class="button word-btn" hover-class="word-btn--hover" :hover-start-time="20"
						:hover-stay-time="70" @click="add"><text class="word-btn-white">增加10条数据</text></button>
					<button class="button" type="default" @click="reset">重置数据</button>
				</view>
			</view>

		</view>
		<view class="container" v-show="showRenting==true">
			<view class="container-top">

				<view class="box-circle">
				</view>
				<view class="text">正在骑行中</view>
			</view>
			<view class="container-bottom">
				<uv-grid :col="2">
					<uv-grid-item v-for="(item,index) in baseList" :key="index">
						<uv-icon :customStyle="{padding:20+'rpx',marginLeft:20+'rpx',marginRight:120+'rpx'}"
							:name="item.name" :size="32"></uv-icon>
						<text class="grid-text" style="white-space: nowrap; font-size: 16px;">{{item.title}}</text>
					</uv-grid-item>
				</uv-grid>

			</view>
			<view class="set-menu">
				<view class="set-menu-c1">
					<view>
						<button class="button-lock" v-show="showLock==true" @click="lockBike()">临时锁车</button>
					</view>
					<view>
						<button class="button-lock" v-show="showLock==false" @click="unlockBike()">继续驾驶</button>
					</view>
					<view>
						<button class="button-logout" @click="returnBike()">归还车辆</button>
					</view>
				</view>
			</view>
		</view>
	</view>


</template>

<script>
	import {
		handleError
	} from "vue";
	import {
		func
	} from "../../../uni_modules/uv-ui-tools/libs/function/test";
	export default {
		data() {
			return {
				/* user放用户信息，setToken返回header的函数，header在mounted用setToken获取到设置好
				 后续直接用header即可
				 */
				user: {},
				apiUrl: '',
				setToken: function() {},
				header: {},
				satoken: '',
				/* 分页 */
				current: 1,
				total: 10,
				pageSize: 10,
				/* 分段器 */
				list: ['全部车辆', '可用车辆'],
				showAllorAvailable: 1, // 选择显示所有车还是显示可用车 
				/* 显示设置选项 */
				showSetting: false,
				/* 电动车数据 */
				bikesData: [],
				/* 显示当前选择电动车变量 */
				currentBikeVo: {},
				currentBike: {},
				currentBattery: {},
				/* 设置阈值 */
				setlightThreshold: 0.0,
				/* 显示当前正在骑车 */
				showRenting: false,
				showLock: true, //锁车
				baseList: [{
					name: 'tags',
					title: '电动车编号：'
				}, {
					name: 'info-circle',
					title: ''
				}, {
					name: 'empty-address',
					title: '已骑行距离：'
				}, {
					name: 'empty-search',
					title: '当前已骑行时间：'
				}],
				/* 是否同步时间 */
				isSyncTime: 0,
			};
		},

		// 在你的uniapp页面中的某个合适的地方，比如created钩子函数内部
		created() {
			// 每5秒执行一次 getLocation 方法
			this.getLocationInterval = setInterval(() => {
				this.getLocation()
					.then((res) => {
						// 这里可以在获取位置信息后进行需要的处理
						console.log('位置信息获取成功：', res);
					})
					.catch((error) => {
						console.log('位置信息获取失败：', error);
					});
			}, 5000); // 5000毫秒即为5秒
			// 每5秒执行一次 getBikeLocation 方法
			this.getBikeLocationInterval = setInterval(() => {
				this.judgeRent()
					.then((res) => {
						// 这里可以在获取位置信息后进行需要的处理
						console.log('位置信息获取成功：', res);
					})
					.catch((error) => {
						console.log('位置信息获取失败：', error);
					});
			}, 5000); // 5000毫秒即为5秒
		},
		mounted() {
			this.apiUrl = getApp().globalData.apiUrl;
			this.user = uni.getStorageSync('user');
			// setToken是设置header放入token的函数
			this.setToken = getApp().globalData.setToken;
			this.header = this.setToken();
			/* 如果没有用户信息或者无token直接返回登录重新获取 */
			if (this.user == '' || this.setToken == null) {
				this.getUserTokenFail();
				setTimeout(function() {
					uni.navigateTo({
						url: '/pages/user/login'
					});
				}, 1000);
			}
			/* 判断一下用户类型显示设置功能 */
			if (this.user.userType == "管理员") {
				this.showSetting = true;
			}
			this.getAvailableBikes(); //先显示可以租用单车的然后切换就可以查看所有自行车
			this.judgeRent();
		},
		methods: {
			/* 下拉刷新 */
			onPullDownRefresh() {
				console.log('refresh');
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1000);
			},
			/* 分段器 */
			changeShowAllorAvailable(index) {
				this.current = 1;
				this.showAllorAvailable = index;
				switch (index) {
					case 1:
						this.getAvailableBikes();
						console.log("查找可用车辆");
						break;
					case 0:
						this.getAllBikes();
						console.log("查找全部车辆");
						break;
					default:
						console.log("超出分段范围");
				}
			},
			/* 顶部提示 */
			getUserTokenFail() {
				this.$refs.notify.error('获取信息错误，请重新登录！');
			},
			judgeRentFail() {
				this.$refs.notify.error('查询借车状况失败（可能需重新登录）');
			},
			/* 借车成功提示 */
			rentSuccess() {
				this.$refs.notify.success('借车成功');
			},
			rentFail() {
				this.$refs.notify.error('借车失败(你可能正处于借车状态)');
			},
			lockSuccess() {
				this.$refs.notify.success('锁车成功');
			},
			lockFail() {
				this.$refs.notify.error('锁车失败');
			},
			unlockSuccess() {
				this.$refs.notify.success('解锁成功');
			},
			unlockFail() {
				this.$refs.notify.error('解锁失败');
			},
			returnSuccess() {
				this.$refs.notify.success('还车成功');
			},
			returnFail() {
				this.$refs.notify.error('还车失败');
			},
			sendSetSuccess() {
				this.$refs.notify.success('发送设置成功');
			},
			sendSetFail() {
				this.$refs.notify.error('发送设置失败');
			},
			/* 获取当前位置 */
			getLocation() {
				return new Promise((resolve) => {
					uni.getLocation({
						type: 'wgs84',
						isHighAccuracy: true,
						success: (res) => {
							console.log('当前位置的经度：' + res.longitude);
							console.log('当前位置的纬度：' + res.latitude);
							this.user.longitude = res.longitude;
							this.user.latitude = res.latitude;
							resolve(res.data);
						},
						fail: (res) => {
							console.log('无法获取当前地理位置', res);
						}
					});

				})
			},
			getDistance(lat1, lng1, lat2, lng2) {
				var radLat1 = lat1 * Math.PI / 180.0;
				var radLat2 = lat2 * Math.PI / 180.0;
				var a = radLat1 - radLat2;
				var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
					Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
				s = s * 6378.137; // EARTH_RADIUS;
				s = Math.round(s * 10000) / 10000;
				return s;
			},
			setBike() {
				/* 显示电池信息 */
				this.baseList[0].title = this.baseList[0].title + "\n" + this.currentBike.bikeId;
				this.baseList[1].title = this.baseList[1].title + "电量剩余：" + this.currentBattery.electricity + "\n正负极温差：" +
					(this.currentBattery.temperatureT1 - this.currentBattery.temperatureT2).toFixed(2) + "℃";

				this.baseList[2].title = this.baseList[2].title + "\n" + this.getDistance(this.currentBikeVo.bike.latitude,
					this.currentBikeVo.bike.longitude, this.currentBikeVo.rideRecord.startLatitude, this.currentBikeVo
					.rideRecord.startLongitude) + "km";
				this.baseList[3].title = this.baseList[3].title + "\n" + (Math.abs(((new Date()).getTime() - new Date(this
					.currentBikeVo.rideRecord.startTime)) / (1000 * 60 * 60) - 8.0)).toFixed(2) + "小时";
			},
			cleanSetBike() {
				this.baseList[0].title = '电动车编号：';
				this.baseList[1].title = '';
				this.baseList[2].title = '已骑行距离：';
				this.baseList[3].title = '当前已骑行时间：';
			},
			manageAllbikes() {
				uni.navigateTo({
					url:"/pages/tabBar/bikes/bikes"
				})
			},
			/* 查询所有可租借的车（无论是否借车） */
			async getAllBikes() {
				await this.getLocation();
				const backendURL = this.apiUrl + "/bicycle/list" + "?pageNum=" + this.current + "&pageSize=" + this
					.pageSize;
				let header = this.setToken();
				let userLocationDto = {
					userId: this.user.userId,
					username: this.user.username,
					longitude: this.user.longitude,
					latitude: this.user.latitude
				}
				let satoken = header.satoken;
				console.log(userLocationDto);
				uni.request({
					url: backendURL,
					method: 'POST',
					dataType: 'json',
					data: JSON.stringify(userLocationDto), // 将user对象转换为JSON字符串
					header: {
						'content-type': 'application/json', // 设置content-type为application/json
						'satoken': satoken
					},
					success: (res) => {
						console.log('成功', res);
						console.log(res.data);
						this.bikesData = res.data.data.rows;
						this.total = res.data.data.total;
					},
					fail: function(res) {
						console.log('错误', res);
					}
				});
			},
			async getAvailableBikes() {
				await this.getLocation();

				const backendURL = this.apiUrl + "/bicycle/availableList" + "?pageNum=" + this.current + "&pageSize=" +
					this
					.pageSize;
				console.log(backendURL);
				let header = this.setToken();
				let userLocationDto = {
					userId: this.user.userId,
					username: this.user.username,
					longitude: this.user.longitude,
					latitude: this.user.latitude
				}
				let satoken = header.satoken;
				console.log(userLocationDto);
				uni.request({
					url: backendURL,
					method: 'POST',
					dataType: 'json',
					data: JSON.stringify(userLocationDto), // 将user对象转换为JSON字符串
					header: {
						'content-type': 'application/json', // 设置content-type为application/json
						'satoken': satoken
					},
					success: (res) => {
						console.log('成功', res);
						console.log(res.data);
						this.bikesData = res.data.data.rows;
						this.total = res.data.data.total;
					},
					fail: function(res) {
						console.log('错误', res);
					}
				});
			},
			async judgeRent() {
				await this.getLocation();
				/* userLocationDto() */
				const backendURL = this.apiUrl + "/user/borrowSituation";
				let header = this.setToken();
				let userLocationDto = {
					userId: this.user.userId,
					username: this.user.username,
					longitude: this.user.longitude,
					latitude: this.user.latitude
				}
				let satoken = header.satoken;
				console.log(userLocationDto);
				uni.request({
					url: backendURL,
					method: 'POST',
					dataType: 'json',
					data: JSON.stringify(userLocationDto), // 将user对象转换为JSON字符串
					header: {
						'content-type': 'application/json', // 设置content-type为application/json
						'satoken': satoken
					},
					success: (res) => {

						console.log(res.data);
						if (res.data.code != 500) {
							/* 直接跳到当前租车页面 */
							this.currentBikeVo = res.data.data;
							console.log(this.currentBikeVo);
							this.setCurrentData(this.currentBikeVo);
							console.log('查询借车情况成功', res);
							this.showRenting = true;
							this.cleanSetBike();
							this.setBike();
						}
					},
					fail: function(res) {
						console.log('查询借车情况错误', res);
					}
				});
			},
			rentBike() {
				/* 传递bikeId和userLocationDto() */
				const backendURL = this.apiUrl + "/bicycle/rent?" + "bikeId=" + this.currentBike.bikeId;
				let header = this.setToken();
				let userLocationDto = {
					userId: this.user.userId,
					username: this.user.username,
					longitude: this.user.longitude,
					latitude: this.user.latitude
				}
				let satoken = header.satoken;
				uni.request({
					url: backendURL,
					method: 'POST',
					dataType: 'json',
					data: JSON.stringify(userLocationDto), // 将user对象转换为JSON字符串
					header: {
						'content-type': 'application/json', // 设置content-type为application/json
						'satoken': satoken
					},
					success: (res) => {
						console.log('成功', res);
						console.log(res.data);
						if (res.data.code == 200) {
							this.rentSuccess();
							/* 显示正在借车中 */
							/* this.judgeRent();解决刚进去currentBikeVo.rideRecord没记录的情况 */
							this.judgeRent();

						}
						if (res.data.code == 500) {
							this.rentFail();
						}
					},
					fail: function(res) {
						console.log('错误', res);
						this.rentFail();
					}
				});
			},
			lockBike() {
				const backendURL = this.apiUrl + "/bicycle/lock?" + "bikeId=" + this.currentBike.bikeId;
				let header = this.setToken();
				let userLocationDto = {
					userId: this.user.userId,
					username: this.user.username,
					longitude: this.user.longitude,
					latitude: this.user.latitude
				}
				let satoken = header.satoken;
				uni.request({
					url: backendURL,
					method: 'POST',
					dataType: 'json',
					data: JSON.stringify(userLocationDto), // 将user对象转换为JSON字符串
					header: {
						'content-type': 'application/json', // 设置content-type为application/json
						'satoken': satoken
					},
					success: (res) => {
						console.log('成功', res);
						console.log(res.data);
						if (res.data.code == 200) {
							this.lockSuccess();
							this.showLock = false; //关闭临时锁车 显示继续行驶
						}
						if (res.data.code == 500) {
							this.lockFail();
						}
					},
					fail: function(res) {
						console.log('错误', res);
						this.lockFail();
					}
				});
			},
			unlockBike() {
				const backendURL = this.apiUrl + "/bicycle/unlock?" + "bikeId=" + this.currentBike.bikeId;
				let header = this.setToken();
				let userLocationDto = {
					userId: this.user.userId,
					username: this.user.username,
					longitude: this.user.longitude,
					latitude: this.user.latitude
				}
				let satoken = header.satoken;
				uni.request({
					url: backendURL,
					method: 'POST',
					dataType: 'json',
					data: JSON.stringify(userLocationDto), // 将user对象转换为JSON字符串
					header: {
						'content-type': 'application/json', // 设置content-type为application/json
						'satoken': satoken
					},
					success: (res) => {
						console.log('成功', res);
						console.log(res.data);
						if (res.data.code == 200) {
							this.unlockSuccess();
							console.log('locklock');
							this.showLock = true;
						}
						if (res.data.code == 500) {
							this.unlockFail();
						}
					},
					fail: function(res) {
						console.log('错误', res);
						this.lockFail();
					}
				});
			},
			returnBike() {
				/* 传递bikeId和userLocationDto() */
				const backendURL = this.apiUrl + "/bicycle/return?" + "bikeId=" + this.currentBike.bikeId;
				let header = this.setToken();
				let userLocationDto = {
					userId: this.user.userId,
					username: this.user.username,
					longitude: this.user.longitude,
					latitude: this.user.latitude
				}
				let satoken = header.satoken;
				uni.request({
					url: backendURL,
					method: 'POST',
					dataType: 'json',
					data: JSON.stringify(userLocationDto), // 将user对象转换为JSON字符串
					header: {
						'content-type': 'application/json', // 设置content-type为application/json
						'satoken': satoken
					},
					success: (res) => {
						console.log('成功', res);
						console.log(res.data);
						if (res.data.code == 200) {
							this.showRenting = false;
							this.returnSuccess();
							this.getAvailableBikes();
						}
						if (res.data.code == 500) {
							this.returnFail();
						}
					},
					fail: function(res) {
						console.log('错误', res);
						this.returnFail();
					}
				});
			},
			sendSet() {
				const backendURL = this.apiUrl + "/publish/setting?" + "bikeId=" + this.currentBike.bikeId +
					"&lightThreshold=" + this.setlightThreshold + "&isSyncTime=" + this.isSyncTime;
				console.log(backendURL);
				let header = this.setToken();
				let userLocationDto = {
					userId: this.user.userId,
					username: this.user.username,
					longitude: this.user.longitude,
					latitude: this.user.latitude
				}
				let satoken = header.satoken;
				uni.request({
					url: backendURL,
					method: 'POST',
					dataType: 'json',
					data: JSON.stringify(userLocationDto), // 将user对象转换为JSON字符串
					header: {
						'content-type': 'application/json', // 设置content-type为application/json
						'satoken': satoken
					},
					success: (res) => {
						console.log('成功', res);
						console.log(res.data);
						if (res.data.code == 200) {
							this.currentBikeVo.bike.lightThreshold = this.setlightThreshold;
							this.setCurrentData(this.currentBikeVo);
							this.sendSetSuccess();
						}
						if (res.data.code == 500) {
							this.sendSetFail();
						}
					},
					fail: function(res) {
						this.sendSetFail();
						console.log('错误', res);

					}
				});
			},
			/* 分页工具 */
			add() {
				this.pageSize += 10;
				if (this.showAllorAvailable == 1) this.getAvailableBikes();
				if (this.showAllorAvailable == 0) this.getAllBikes();
			},
			reset() {
				this.pageSize = 10;
				this.current = 1;
				if (this.showAllorAvailable == 1) this.getAvailableBikes();
				if (this.showAllorAvailable == 0) this.getAllBikes();
			},
			changePage(e) {
				console.log(e);
				this.current = e.current;
				if (this.showAllorAvailable == 1) this.getAvailableBikes();
				if (this.showAllorAvailable == 0) this.getAllBikes();
			},
			/* 赋值 */
			setCurrentData(bikeVo) {
				this.currentBikeVo = bikeVo;
				this.currentBike = bikeVo.bike;
				this.currentBattery = bikeVo.battery;
			},
			cleanCurrentData(bikeVo) {
				this.currentBikeVo = {};
				this.currentBike = {};
				this.currentBattery = {};
			},
			/* 打开弹窗并传递bikeVo */
			openPopup(bikeVo) {
				this.setCurrentData(bikeVo);
				console.log(this.currentBikeVo);
				console.log(this.currentBike);
				console.log(this.currentBattery);
				this.open();
			},
			/* 打开弹窗 */
			open() {
				this.$refs.popup.open('bottom');
			},
			change(e) {
				console.log('弹窗状态改变：', e);
			},
			closePopup() {
				this.$refs.popup.close('left');
			},
			//步进器
			valChange(e) {
				console.log('当前值为: ' + e.value)
				this.currentBikeVo.bikelightThreshold = e.value;
				/* 重新赋值 */
				this.setCurrentData(this.currentBikeVo);
			}
		},
		// 在组件销毁前清除定时器
		beforeDestroy() {
			clearInterval(this.getLocationInterval);
		}
	};
</script>

<style>
	button {
		white-space: nowrap;
	}

	.bike-status {
		display: flex;
	}

	.popup-content {
		flex: 1;
	}

	/* 分页 */
	.btn-view {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		padding: 15px;
		text-align: center;
		background-color: #fff;
		justify-content: center;
		align-items: center;
	}

	.btn-flex {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.button {
		margin: 20px;
		width: 150px;
		font-size: 14px;
		color: #333;
	}

	/* 此部分从renting复制 */
	.container {

		justify-content: center;
		align-items: center;
		overflow: auto;
		height: 100vh;

		background: linear-gradient(to bottom right, #55AAFF, #76FAC7);
	}

	.container-top,
	.container-bottom {
		margin-top: 10%;
		width: 100%;
		display: flex;
		flex: 1;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}


	.box-circle {
		/* border: 10px solid #ffaaff; */
		border-left: 10px solid #55aaff;
		border-right: 10px solid #76FAC7;
		border-radius: 50%;
		width: 200px;
		height: 200px;
		position: relative;
		animation: turn 5s linear infinite;
		transform-origin: 50% 50%;
	}

	.text {
		position: absolute;
		top: 20%;
		font-size: 20px;
		color: #ffffff;
	}

	@keyframes turn {
		100% {
			transform: rotateZ(-1turn);
		}
	}

	/* 宫格样式 */
	.grid-text {
		font-size: 14px;
		color: #909399;
	}

	/* 直接从个人中心复制 */
	.set-menu {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.set-menu-c1 {
		display: flex;
		flex-direction: row;
	}

	.button-lock {
		/* background: linear-gradient(to top left, #55AAFF, #76FAC7); */
		border: 5px solid transparent;
		border-radius: 16px;
		background-clip: padding-box, border-box;
		background-origin: padding-box, border-box;
		background-image: linear-gradient(to left, #55AAFF, #76FAC7), linear-gradient(to top left, #55AAFF, #76FAC7);
		background-size: 200%;
		color: white;
		border-radius: 10px;
		padding: 10px 20px;
		cursor: pointer;
		transition: background .3s;
	}


	.button-lock:hover {
		background-image: linear-gradient(to right, #F780A7, #76FAC7), linear-gradient(to top left, #55AAFF, #76FAC7);
		background-position: 100% 0;
	}

	.button-logout {
		margin-left: 20px;
		border: 5px solid transparent;
		border-radius: 16px;
		background-clip: padding-box, border-box;
		background-origin: padding-box, border-box;
		background-image: linear-gradient(to left, #ff007f, #dc0064), linear-gradient(to top left, #dc0064, #ffffff);
		background-size: 200%;
		color: white;
		border-radius: 10px;
		padding: 10px 20px;
		cursor: pointer;
		transition: background .3s;
	}

	.button-logout:hover {
		background-image: linear-gradient(to right, #ff007f, #B9004A), linear-gradient(to top left, #F780A7, #B9004A);
		background-position: 100% 0;
	}
</style>